<template>
  <div class="bound-veh-background">
    <div style="background: #30AFF7;">
      <van-row type="flex" style="padding: 20px;padding-bottom: 0px;">
        <van-col span="24">
          <div class="bound-veh-tite-text1">绑定车辆以便后续使用</div>
          <div class="bound-veh-tite-text2">选择车牌颜色并输入车牌号进行绑定</div>
        </van-col>
      </van-row>
      <van-row type="flex" style="padding: 20px;text-align: center;" >
        <van-col span="24">
          <van-field  v-model="plateColor.text" placeholder="车牌号" error-message="" readonly @click.native='selectPlateColor();' class='bound-veh-field-picker'/>
          <van-field  disabled v-model='carNumber'  center clearable placeholder="请输入车牌号" @click.native='showKeyBoard()' class='bound-veh-field-input'>
            <span slot="button" class="bound-veh-field-slottext" @click.stop='save()'>新增</span>
          </van-field>
        </van-col>
      </van-row>
    </div>
    <van-row type="flex" class='bound-veh-list' style='padding-bottom: 20px'>
      <van-col span="24">
        {{list.length==0?'暂无':''}}车辆列表
        <van-list v-model="loading" :finished="finished" @load="onLoad" >
          <!-- v-carplate='[item.vehNo,item.platColor]' -->
          <van-cell class='bound-veh-cellCenter' v-for="item in list" :key="item.id"  v-carplate-text='[item.plateNo,item.plateColor]' >

          </van-cell>
        </van-list>
      </van-col>
    </van-row>
    <van-popup v-model="show" position="bottom" :overlay="false">
      <van-row style='padding: 1%;margin: 0px' v-show="showTyper==1" gutter="5">
        <van-col v-for="i in provinces" span='3'   style='margin-top: 0.2%;' @click.native='input(i)'>
          <div align="center" class="bound-veh-keyboardcell" :style="[{backgroundColor:(i=='关闭' ? '#30AFF7' : '')},{color:(i=='关闭' ? '#ffffff' : '')}]"
               :class="{ 'bound-veh-keyboardactive': i==active }" >
            {{i}}
          </div>
        </van-col>
      </van-row>
      <van-row style='padding: 1%;margin: 0px' v-show="showTyper==2" >
        <div class="bound-veh-keyBoard-num">
                <span class="bound-veh-keyBoard-numkey bound-veh-keyBoard-numkeywidth" v-for="i in keyNums"  @click='input(i)' :class="{ 'delete-button': i=='×' ,'bound-veh-keyboardactive': i==active }"
                >{{i}}</span>
          <!-- :style='{"margin-left":{A:"5%",Z:"10%"}[i]}' -->
        </div>
      </van-row>
      <span @click='hideKeyBoard()' class="bound-veh-keyboardbutton">
            完成
        </span>
    </van-popup>
    <van-popup v-model="showGetPlateColor" style='width:90%'>
      <van-picker ref='boundVehicleSelectPlateColor' @change="getPlateColor"  show-toolbar title="选择车牌颜色" :columns="columns" @cancel="hidenPlateColor()" @confirm="hidenPlateColor()" />
    </van-popup>
  </div>
</template>
<script >
  import { CarManageService } from '../personalCenter/api';
  import { Toast } from 'vant';
  import { Dialog } from 'vant';
  export default {
    name: 'ReserveBindCar',
    data() {
      return {
        initSelectPlateColor:false,
        itemCount:1,
        loading: false,
        finished: false,
        show: false,
        list: [],
        showTyper: 0,    //输入法的值，0表示不显示，1表示显示省输入键盘，2表示显示数字字母输入键盘
        provinces:["京","沪","浙","苏","粤","鲁","晋","冀",    //省
          "豫","川","渝","辽","吉","黑","皖","鄂",
          "津","贵","云","桂","琼","青","新","藏",
          "蒙","宁","甘","陕","闽","赣","湘","关闭"],
        keyNums:["0","1","2","3","4","5","6","7","8","9",     //数字字母
          "A","B","C","D","E","F","G","H","J","K","L","M","N",
          "P","Q","R","S","T","U","V","W","X","Y","Z","挂","学","警","港","澳","×"],
        showGetPlateColor:false,
        carNumber:'',
        plateColor:{ text: '蓝色', value: 2},
        active:'',
        columns:[
          {
            values:[            { text: '白色', value: 0 } ,
              { text: '黄色', value: 1 } ,
              { text: '蓝色', value: 2 ,defaultIndex:2} ,
              { text: '黑色', value: 3 },
              { text: '绿色', value: 4 } ,
              { text: '其他颜色', value: 9 }],
            defaultIndex: 2
          }
        ],
        zqOpenId:'',
      };
    },
    mounted(){
      this.zqOpenId=this.$route.query.openid  //章丘openid
      if(this.zqOpenId==null||this.zqOpenId==undefined){  //获取不到openid
        Dialog.alert({
          title: '发生错误',
          message: '<P style="text-align: center">请返回重试</P>'
        }).then(() => {
          // on close
          this.$router.replace({
            path:'/nearPark'
          })
        });
      }
    },
    methods: {
      onLoad() {
        CarManageService.findCommonCars(this.zqOpenId).then((res) => {
          this.list = res;
        }, (err) => {
        });
        this.loading=false;
        this.finished=true;
      },
      showKeyBoard() {
        this.show = true;
        this.showTyper = 1;
        this.changeTyper();
      },
      hideKeyBoard() {
        this.show = false;
        this.showTyper = 0;
      },
      input:function (item) {
        if(item=='OK'||item=='关闭'){    //判断是否点击了关闭按钮
          this.show=false;
          this.showTyper = 1;
          return;
        }
        if (item=='×'){
          this.carNumber = this.carNumber.slice(0,-1);
          this.changeTyper();
          this.active=this.carNumber.charAt(this.carNumber.length-1)
          return;
        }
        if(this.carNumber.length<8){    //判断当前的车牌号的数目是否合法，还未超出7位则可继续输入
          this.carNumber=this.carNumber+item;
          this.changeTyper();
          this.active=item;
        }else {
          Toast.fail('车牌号码超出正常范围');
        }
      },
      changeTyper:function () {
        if(this.carNumber.length>=1){
          this.showTyper = 2;
        }
        if(this.carNumber.length==0){
          this.showTyper = 1;
        }
      },
      save: function () {
        var that=this
        this.show = false;
        this.showTyper = 0;
        var carNumberReg = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4,5}[A-Z0-9挂学警港澳]{1}$/;
        if (!carNumberReg.test(this.carNumber)) {
          Toast.fail('请输入正确的车牌号码');
          this.showKeyBoard();
          return;
        }else{
          if(!this.plateColor||!this.plateColor.text){
            Toast.fail('请选择车牌颜色');
            return;
          }
          let saveData={
            'openid':this.zqOpenId,
            'isDefault':(this.list.length<1?1:0),
            'plateColor':this.plateColor.value,
            'plateNo':this.carNumber
          }
          CarManageService.bindCar(saveData).then((res) => {
            this.onLoad();
            Dialog.confirm({
              title: '成功',
              message: '<p style="text-align: center">车辆绑定成功</p>',
              confirmButtonText:'查询车场',
              cancelButtonText:'继续绑车'
            }).then(() => {
              // on confirm   去查询车场
              that.$router.replace({
                path:'/nearPark',
                query:{
                  openid:that.zqOpenId
                }
              })
            }).catch(() => {
              // on cancel  留着本页
              return
            });
          }, (err) => {
            Toast.fail(err.responseJSON.msg);
          });
        }
      },
      selectPlateColor(){
        this.showGetPlateColor=true;
      },
      hidenPlateColor(){
        this.showGetPlateColor=false;
      },
      getPlateColor( picker, value, index) {
        this.plateColor=value[0];
      }

    },
    watch:{
      showGetPlateColor(newVal,oldVal){

      }
    }
  };
</script>
<style scoped>
  .bound-veh-background {
    position: relative;
    top: 0px;
    left: 0px;
    background: #f7f6f6;
    min-height: 100vh;
  }

  .bound-veh-tite-text1 {
    font-size: 23px;
    color:#FFFFFF;
    margin-bottom: 13px;
  }
  .bound-veh-tite-text2 {
    font-size: 14px;
    color: #FFFFFF;
    line-height: 21px;
  }
  .bound-veh-field {
    border: 1px solid #30AFF7;
    border-radius: 8px;
  }

  .bound-veh-field-slottext {
    color: #3DA6FF;
    font-size: 20px;
  }

  .bound-veh-field-picker{
    display: inline-block;
    width: 16%;
    height: 100%;
    border-bottom-left-radius: 8px;
    border-top-left-radius: 8px;
  }
  .bound-veh-field-input{
    display: inline-block;
    width: 83%;
    height: 100%;
    border-bottom-right-radius: 8px;
    border-top-right-radius: 8px;
  }

  @media screen and (max-width: 487px) {
    .bound-veh-field-picker{
      width: 19%;
    }
    .bound-veh-field-input{
      width: 77%;
    }
  }
  @media screen and (max-width: 305px) {
    .bound-veh-field-picker{
      width: 23%;
    }
    .bound-veh-field-input{
      width: 74%;
    }
  }
  @media screen and (max-width: 275px) {
    .bound-veh-field-picker{
      width: 26%;
    }
    .bound-veh-field-input{
      width: 70%;
    }
  }

  .bound-veh-list {
    color: #3DA6FF;
    text-align: center;
    margin: 20px;
  }

  .bound-veh-keyboardcell {
    cursor: pointer;
    border-radius: 5px;
    vertical-align: middle;
    display: table-cell;
    border: 1px solid #dfdfdf;
    height: 35px;
    width: 1%;
    color: #30AFF7;
  }

  .bound-veh-keyboardbutton {
    background: #30AFF7;
    color: #FFFFFF;
    font-size: 20px;
    height: 22px;
    text-align: center;
    padding: 5px;
    width: 100%;
    display: inline-block;
  }

  .bound-veh-cellCenter{
    text-align: center;
    display: inline-block;
  }

  .bound-veh-keyBoard-num{
    text-align: center;
    display: table;
    width: 100%;
  }

  .bound-veh-keyBoard-numkey{
    cursor: pointer;
    border-radius: 5px;
    vertical-align: middle;
    display: inline-block;
    border: 1px solid #dfdfdf;
    line-height: 35px;
    color: #30AFF7;
    float: left;
  }

  .bound-veh-keyBoard-numkeywidth{
    width: 9%;
    margin: 0.4%
  }




  @media screen and (max-width: 1035px) {
    .bound-veh-keyBoard-numkeywidth{
      width: 9%;
      margin: 0.36%
    }
  }

  @media screen and (max-width: 725px) {
    .bound-veh-keyBoard-numkeywidth{
      width: 9%;
      margin: 0.33%
    }
  }
  @media screen and (max-width: 603px) {
    .bound-veh-keyBoard-numkeywidth{
      width: 9%;
      margin: 0.3%
    }
  }

  @media screen and (max-width: 506px) {
    .bound-veh-keyBoard-numkeywidth{
      width: 9%;
      margin: 0.27%
    }
  }

  @media screen and (max-width: 443px) {
    .bound-veh-keyBoard-numkeywidth{
      width: 8.9%;
      margin: 0.25%
    }
  }

  @media screen and (max-width: 340px) {
    .bound-veh-keyBoard-numkeywidth{
      width: 8.8%;
      margin: 0.22%
    }
  }

  @media screen and (max-width: 267px) {
    .bound-veh-keyBoard-numkeywidth{
      width: 8.6%;
      margin: 0.2%
    }
  }

  @media screen and (max-width: 203px) {
    .bound-veh-keyBoard-numkeywidth{
      width: 8.3%;
      margin: 0.15%
    }
  }

  @media screen and (max-width: 144px) {
    .bound-veh-keyBoard-numkeywidth{
      width: 8%;
      margin: 0.1%
    }
  }

  @media screen and (max-width: 125px) {
    .bound-veh-keyBoard-numkeywidth{
      width: 8%;
      margin: 0.05%
    }
  }
  .delete-button{
    background-color: #30AFF7;
    color: red;
    font-weight: bold;
    font-size: 10vh;
  }
  .bound-veh-keyboardactive{
    background-color: #30AFF7;
    color: #ffffff;
  }
</style>

